<template>
  <BaseForm v-model="formDataModel" @close="$emit('callBack')" />
</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus';
import ProductMenuCheckApi from '/@/api/webPath/ProductMenuCheckApi.ts';
import { translate } from "/@/i18n";
import FORM_FIELD_TYPE from "/@/constants/FormFieldType.ts";
import { onMounted, ref, defineProps, defineEmits, defineExpose } from 'vue'; // 引入必要的 Vue 函数

defineOptions({
  name: 'ProductMenuCheckEdit',
});

const props = defineProps({
  modelValue: {
    type: Object, // 明确类型
    default: () => ({}), // 提供默认值，避免 undefined 错误
  },
});
const emit = defineEmits(['fetch-data', 'callBack']);

const formRef = ref<FormInstance>();
const title = ref<string>('');
const dialogFormVisible = ref<boolean>(false);

const formDataModel = ref({
  columnCount: 1,
  expandLimit: 6,
  autoFit: false,
  columnWidth: '300px',
  labelPosition: 'right',
  labelWidth: '100px',
  modelData: {}, // 表单参数值 初始化
  callback: async (any: object) => {
    // 完成数据提交
    const { message } = await ProductMenuCheckApi.save(any);
    $baseMessage(message, 'success', 'vab-hey-message-success');
    dialogFormVisible.value = false;

    // 事件及数据推送到上一层父类
    emit('callBack', any); // 把表单数据推送到上一层
  },
  items: [
    {
      label: "检测时间",
      field: "checkDate",
      clearable: true,
      type: FORM_FIELD_TYPE.DATETIME,
      placeholder: "请输入",
      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          callback();
        },
      },
      config: {
        props: {
          type: "daterange",
          startPlaceholder: "开始日期",
          endPlaceholder: "结束日期",
          format: "YYYY-MM-DD",
        },
      },
    },
    {
      label: "名称",
      field: "name",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      placeholder: "请输入",
      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          callback();
        },
      },
    },
    {
      label: "检测项目",
      field: "checkItem",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      placeholder: "请输入",
      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          callback();
        },
      },
    },
    {
      label: "检测人",
      field: "checkPersonName",
      clearable: true,
      type: FORM_FIELD_TYPE.INPUT,
      placeholder: "请输入",
      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          callback();
        },
      },
    },
    {
      label: "检测结果",
      field: "checkResult",
      clearable: true,
      type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
      placeholder: "请选择", // 修改 placeholder
        options: [
          {
            value: "合格",
            label: "合格",
          },
          {
            value: "不合格",
            label: "不合格",
          },
        ],
      rule: {
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
          callback();
        },
      },
    },
  ],
});

// 页面数据加载
onMounted(async () => {
  // 初始化数据model
  if (props.modelValue && props.modelValue.query) {
    // 确保 props.modelValue 存在
    if (props.modelValue.query.productMenuCheckId) {
      // id存在则为编辑，加载网络数据，如上级页面带参数手动覆盖
      const { data } = await ProductMenuCheckApi.getDetail({
        productMenuCheckId: props.modelValue.query.productMenuCheckId, // 从路由中获取参数
      });
      formDataModel.value.modelData = data;
    } else {
      // 新增时候则用父类页面传参默认填充可根据业务修改
      for (const key in props.modelValue.query) {
        formDataModel.value.modelData[key] = props.modelValue.query[key];
      }
      // 设置 checkResult 的默认值 (新增时)
      formDataModel.value.modelData.checkResult = "合格"; // 或者 "不合格"，根据你的业务逻辑
    }
  } else {
    // 如果是新增且没有 query 参数，设置 checkResult 的默认值
    formDataModel.value.modelData.checkResult = "合格"; // 或者 "不合格"，根据你的业务逻辑
  }
});

// 方法暴露区域  todo
defineExpose({});
</script>
